"use client";
import "./store.css";
import React, { useEffect, useState, useCallback,useRef } from "react";
import { getOfflineStore } from "@/app/api/index";
import { Image, Table, Pagination } from "antd";
export default function Store({ params }:{params:{id:string}}) {
  const [data, setData] = useState([]);
  const [pageNum, setPageNum] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [total, setTotal] = useState(0);
  const type = useRef(params.id==="51"?"01":"02")
  const dataChange = useCallback((pageNum: number, pageSize: number) => {
    setPageNum(pageNum);
    setPageSize(pageSize);
    getOfflineStore(pageNum, pageSize,type.current).then((res) => {
      setData(res.data.list);
      setTotal(res.data.total);
    });
  }, []);
  useEffect(() => {
    getOfflineStore(pageNum, pageSize,type.current).then((res) => {
      setData(res.data.list);
      setTotal(res.data.total);
    });
  }, []);

  const columns = [
    {
      title: "门店照片",
      dataIndex: "photo",
      key: "photo",
      width: "15%",
      render: (text: any, record: any, index: any) => {
        return <Image src={text} width={"100%"} alt=""></Image>;
      },
    },
    {
      title: "店名",
      dataIndex: "name",
      width: "15%",
      key: "name",
    },
    {
      title: "联系电话",
      dataIndex: "tel",
      width: "15%",
      key: "tel",
    },
    {
      title: "门店地址",
      dataIndex: "address",
      key: "address",
      width: "55%",
    },
  ];

  return (
    <div className="page_style">
      <div className="store_header">
        <div className="header_title">线下门店</div>
        <div className="header_sub">Offline Store</div>
      </div>
      <div className="content_area">
        <Table
          dataSource={data}
          columns={columns}
          rowKey={(record) => record.id}
          pagination={false}
        />
        <Pagination
          className="mt-[1%] mb-[1%]"
          defaultCurrent={1}
          defaultPageSize={10}
          current={pageNum}
          pageSize={pageSize}
          pageSizeOptions={[10, 20, 30, 40, 50]}
          showSizeChanger
          total={total}
          onChange={dataChange}
          showTotal={(total,range)=>   `第${range[0]}-${range[1]}条 共${total}条`}
        />
      </div>
    </div>
  );
}
